<template>
  <div class="query">
    <van-nav-bar
      title="产线发货"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-form @submit="onSubmit">
      <van-field
        v-model="current_location_name"
        label="库位码"
        size="large"
        name="current_location_name"
        clearable
        placeholder="请扫描当前库位码"
        :rules="[{ required: true, message: '请扫描当前库位码' }]"
      />

      <!-- <van-field
        v-model="object_name"
        clearable
        name="dolly号"
        label="dolly号"
        size="large"
        placeholder="请输入/扫描dolly二维码"
      /> -->

      <van-field
        readonly
        clickable
        name="picker"
        size="large"
        :value="object_type_id"
        clearable
        label="终点区域"
        placeholder="点击选择终点区域"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>

      <van-field
        readonly
        clickable
        name="picker"
        :value="sku"
        label="托盘类型"
        size="large"
        clearable
        placeholder="请选择托盘类型"
        @click="showPicker1 = true"
      />
      <van-popup v-model="showPicker1" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns2"
          @confirm="onConfirm2"
          @cancel="showPicker1 = false"
        />
      </van-popup>

      <van-field
        v-model="num"
        name="num"
        label="上层空闲库位"
        size="large"
        clearable
        placeholder=""
      />
      <van-field
        v-model="num"
        name="num"
        label="下层空闲库位"
        size="large"
        clearable
        placeholder=""
      />
      <div style="margin: 16px">
        <van-button
          size="large"
          type="primary"
          style="margin-top: 20px"
          native-type="submit"
          >确认下料</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { SyncAdd } from "@/api/api";
import { Toast } from "vant";

export default {
  name: "LibraryLocationQuery",
  data: () => {
    return {
      current_location_name: "",
      object_name: "",
      pallet_type: "",
      object_type_id: "",
      sku: "",
      num: "",
      columns: ["上层区域", "下层区域"],
      columns2: [
        "1100x1100x150托盘",
        "1100x800x170托盘",
      ],
      skuMap: {
        后盖低配: "10",
        后盖高配: "11",
        左后门: "20",
        右后门: "30",
        左前门: "40",
        右前门: "50",
        前盖: "60",
        左翼子板: "70",
        右翼子板: "80",
      },
      skuMapE: {
        "10": "后盖低配",
        "11": "后盖高配",
        "20": "左后门",
        "30": "右后门",
        "40": "左前门",
        "50": "右前门",
        "60": "前盖",
        "70": "左翼子板",
        "80": "右翼子板",
      },
      showPicker: false,
      showPicker1: false,
    };
  },
  watch: {},
  created() {},
  mounted() {
    let params = sessionStorage.getItem("SubHtml");
    if (params) {
      console.log(JSON.parse(params));
      this.init(JSON.parse(params).data[0]);
    }
  },
  destroyed: function () {},
  methods: {
    onClickLeft() {
      this.$router.replace("/home");
    },
    onConfirm(value) {
      this.object_type_id = value;
      this.showPicker = false;
    },
    onConfirm2(value) {
      this.sku = value;
      this.showPicker1 = false;
    },
    onSubmit(values) {
      console.log("submit", values);
      if (values.current_location_name) {
        this.bind();
      }
    },
    init(params) {
      this.current_location_name = params.current_location_name;
      this.object_type_id = this.columns[params.object_type_id * 1 - 1];
      this.object_name = params.object_name;
      this.sku = this.skuMapE[params.extra_info.sku];
      this.num = params.extra_info.num;
    },
    clearInfo() {
      this.current_location_name = "";
      this.object_name = "";
      this.pallet_type = "";
      this.object_type_id = "";
      this.sku = "";
      this.num = "";
    },
    bind() {
      const params = {
        data: [
          {
            object_type_id: this.columns.indexOf(this.object_type_id) + 1,
            object_name: this.object_name,
            pallet_type: this.columns.indexOf(this.object_type_id) + 1,
            current_location_name: this.current_location_name,
            extra_info: {
              sku: this.skuMap[this.sku],
              num: this.num,
            },
            carrier_type_id: 1,
          },
        ],
        in_dispatch_type: 1,
      };
      console.log("SyncAdd==res", params);
      SyncAdd(params)
        .then((res) => {
          console.log("SyncAdd==kes", res);
          if (res.code == 0) {
            if (res.data.error_list.length > 0) {
              sessionStorage.setItem("SubHtml", JSON.stringify(params));
              Toast.fail(res.data.error_list[0].error);
            }
            if (res.data.success_list.length > 0) {
              Toast.success("操作成功");
              this.clearInfo();
            }
          }
        })
        .catch(() => {
          sessionStorage.setItem("SubHtml", JSON.stringify(params));
        });

      // let [ERR, KRES] = await SyncAdd(params);
    },
  },
};
</script>

<style scoped>
.query {
  /* padding: 0 10px; */
  /* background: #eee; */
}
</style>
